<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
        <!DOCTYPE html>
        <html lang="en">

        <head>
            <%@ include file="templates/header-css.jsp"%>

                <title>index</title>
                

                
        </head>
        <body class="gray-bg">


            <!--Header-->
            <%@ include file="templates/navbar.jsp" %>

                <div class="mid-nav center outer-carousel">
                    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                        <!-- Indicators -->
                        <ol class="carousel-indicators">
                            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                            <c:forEach var="c" items="${fList}" varStatus="status">
                            	<li data-target="#carousel-example-generic" data-slide-to="${status.count }"></li>
                            </c:forEach>
                            <!-- <li data-target="#carousel-example-generic" data-slide-to="2"></li> -->
                        </ol>

                        <!-- Wrapper for slides -->
                        <div class="carousel-inner" role="listbox">
                            <div class="item active">
                                <a href="javascript:void(0)"> <img src="./img/1.jpg">
                                    <div class="carousel-caption">M记</div>
                                </a>
                            </div>
                            <c:forEach var="f" items="${fList}">
	                            <div class="item">
	                                <a href="aDFoodController?fId=${f.fId}"> <img src="${myPicServer}${f.fViewPath}">
	                                    <div class="carousel-caption">${f.fName}</div>
	                                </a>
	                            </div>
                            </c:forEach>
                        </div>

                        <!-- Controls -->
                        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                            <span class="sr-only">Previous</span>
                        </a>
                        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                            <span class="sr-only">Next</span>
                        </a>
                    </div>
                </div>


                <div class="mid-nav shadow-div">
                    <div class="row list-row">
                        <c:forEach var="merchant" items="${merchants }">
                            <div class="col-sm-4 col-md-3">
                                <input type="text" value="${merchant.mId }" style="display: none;" />
                                <div class="thumbnail">
                                    <i class="inside-icon glyphicon glyphicon-search"></i>
                                    <a href="showFood?mId=${merchant.mId.intValue()}"> <img src="${myPicServer}${merchant.mLogoPath }" class="home-img">
                                        <div class="caption">
                                            <h3>${merchant.mBrand }</h3>
                                            <div class="row no-margin">
                                                <div class="col-md-8">
                                                    <span class="glyphicon glyphicon-phone-alt tel-icon"></span> <b>${merchant.mTel }</b>
                                                </div>
                                                <div class="col-md-4">
                                                	<span><fmt:formatNumber value="${merchant.mStark}" type="currency" pattern=".0分"/></span>
                                                    
                                                </div>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </c:forEach>

                    </div>
                </div>

                <a href="#top">
                    <div class="top-box">
                        <span class="glyphicon glyphicon-chevron-up back-icon"></span>
                    </div>
                </a>



                <!-- 登录模态框 -->
                <div class="modal fade" id="SignInModal" tabindex="-1" role="dialog" aria-labelledby="title">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header gold-bg">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title" id="title">Sign in</h4>
                            </div>
                            <div class="modal-body">
                                <div class="container-fluid">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="panel panel-default">
                                                <div class="panel-body">
                                                    <form action="." method="post">
                                                        <div class="form-group">
                                                            <label for="usr">Telephone</label>
                                                            <div class="input-group">
                                                                <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span> </span>
                                                                <input type="text" class="form-control" name="username" placeholder="Telephone" autofocus>
                                                            </div>
                                                        </div>
                                                        <div class="form-group">
                                                            <label for="pwd">Password</label>
                                                            <div class="input-group">
                                                                <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span> </span>
                                                                <input type="password" class="form-control" name="password" placeholder="password">
                                                            </div>
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                                <div class="modal-footer">
                                    <button class="btn btn-common btn-block" type="button">Sign in</button>
                                    <button class="btn btn-default btn-block" type="button" data-dismiss="modal">Cancel</button>
                                </div>
                        </div>
                    </div>
                </div>
                <footer>
                    <%@ include file="templates/footer.jsp"%>
                        <script type="text/javascript">
                            $(document).ready(function () {
                                //登录模态框，由bootstrap的data-toggle实现


                                //登录
                                $('.modal-footer>button:first').click(function () {
                                    $.post(
                                        'login', {
                                            username: $('[name=username]').val(),
                                            password: $('[name=password]').val()
                                        },
                                        function (data) {
                                            if (data.st === 1) {
                                                alert(data.msg);
                                                window.location = '${pageContext.request.contextPath}';
                                            } else if (data.st === -1) {
                                                alert(data.msg);
                                                //window.href = 'clientHome.html';
                                            } else {
                                                alert(data.msg);
                                                alert('unknown');
                                            }
                                        }
                                    );
                                });
                                
                            });
                      	
   
                        </script>
                </footer>
        </body>
        <script type="text/javascript">
        //数据初始化
        $(function(){
        	$.ajax({
    			url : "init",
    			type : "get",
    			success : function(d) {
    				if(d){
    					console.log(d);
    					window.location.reload();
    				}
    			}
    		})
        });
            		
    	
        </script>
                

        </html>